import React, {PureComponent} from "react"
import {rootPath} from "init"
// import "antd/dist/antd.less"
import "./index.less"
import {appContext} from "context/app-context"
import {createMenus, menuSettings, permissionMenu} from "./menu-creator"
import {LoadingOutlined} from '@ant-design/icons';
import {ConfigProvider, Menu} from "antd";
import menuCompose from "./menu-compose"
import {read} from "zr-react-toolbox"
import menus from "menus"

const RootMenu = Menu

const globalConfig = {
  getPopupContainer: () => document.getElementsByTagName("body")[0]
}

@appContext
@menuCompose
class AppMenu extends PureComponent {


  constructor(props) {
    super(props)
  }


  render() {
    const {context, selectedKeys, openKeys} = this.props
    const resources = read(context, 'userInfo.resources') || []
    const userInfoBusy = context.userInfoBusy
    const userMenus = resources && resources.length > 0 ? permissionMenu(menus(), resources) || [] : []
    return (
      <div className="zr-menu-container">
        {
          userInfoBusy
            ? <LoadingOutlined />
            :
            <ConfigProvider {...globalConfig}>
              <RootMenu {...menuSettings}
                        defaultSelectedKeys={selectedKeys}
                        defaultOpenKeys={openKeys}
                        inlineCollapsed={context.menuCollapsed}>
                {createMenus(userMenus, null, rootPath)}
              </RootMenu>
            </ConfigProvider>
        }
      </div>
    );
  }
}


export default AppMenu